<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link  ref="stylesheet" href="../css/iconfont.css"/>
		<link rel="stylesheet" href="../css/12306.css"/>
	</head>
	<style>
		.triangle {
		  width: 0;
		  height: 0;
		  border-left: 50px solid transparent;
		  border-right: 50px solid transparent;
		  border-bottom: 100px solid red;
		}
	</style>
	<body>
		<div id="app">
			<div class="header-12306">
				<div class="header-left">
					<a class="a-log"></a>
				</div>
				<div class="header-right">
					<div class="header-reight-backage-image">
						<div class="input-search">
							<input placeholder="搜索车票/餐饮/常旅客/相关规章">
							<button>
								<span>
									<svg width="18" height="18" viewBox="0 0 24 24" class="Zi Zi--Search SearchBar-searchIcon css-1dlt5yv" fill="currentColor"><path fill-rule="evenodd" d="M11.8 2.425a9.075 9.075 0 1 0 5.62 16.201l2.783 2.783a.875.875 0 1 0 1.238-1.237l-2.758-2.758A9.075 9.075 0 0 0 11.8 2.425ZM4.475 11.5a7.325 7.325 0 1 1 14.65 0 7.325 7.325 0 0 1-14.65 0Z" clip-rule="evenodd"></path></svg>
								</span>
							</button>
						</div>
						<div class="youjiancaidan">
							<!-- 右侧菜单 -->
							<ul>
								<li>
									<a class="ul-li-a">无障碍</a>
								</li>
								<li>|</li>
								<li>
									<a class="ul-li-a">爱心版</a>
								</li>
								<li>|</li>
								<li id="yuyanyan-li">
									<a class="ul-li-a">English</a>
									<a class="caret"></a>
								</li>
								<li>|</li>
								<li id="wode12306-li">
									<a class="ul-li-a">我的12306</a>
									<a class="caret"></a>
								</li>
								<li>|</li>
								<li>
									<a class="ul-li-a">你好,用户</a>
								</li>
								<li>|</li>
								<li>
									<a class="ul-li-a">退出</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		
			<div class="navigation">
				<ul class="navigation-ul">
					<li class="item-li">
						<a>首页</a>
					<!-- 	<div class="item-div">
							首页
						</div> -->
					</li>
					<li class="item-li">
						<a>车票</a>
						<div class="item-div">
							<div class="col">
								<div class="col-3">
									<a class="item-div-title">购买</a>
									<ul>
										<li>单程</li>
										<li>往返</li>
										<li>中转换乘</li>
										<li>记次定期票</li>
										<li>中转换乘</li>
										<li>记次定期票</li>
									</ul>
								</div>
								<div class="col-3">
									
								</div>
								<div class="col-3">
									
								</div>
							</div>
							
						</div>
					</li>
					<li class="item-li">
						<a>团购服务</a>
						<div class="item-div">
							团购服务
						</div>
					</li>
					<li class="item-li">
						<a>会员服务</a>
						<div class="item-div">
							会员服务
						</div>
					</li>
					<li class="item-li">
						<a>站车服务</a>
						<div class="item-div">
							站车服务
						</div>
					</li>
					<li class="item-li">
						<a>商旅服务</a>
						<div class="item-div">
							商旅服务
						</div>
					</li>
					<li class="item-li">
						<a>出行指南</a>
						<div class="item-div">
							出行指南
						</div>
					</li>
					<li class="item-li">
						<a>信息指南</a>
						<div class="item-div">
							信息指南
						</div>
					</li>			
				</ul>
			</div>
			<div class="lunbotu">
				<div id="main" class="lunbo-main"></div>
				<div id="search-piao" class="search-piao">
					<ul class="search-side">
						<li class="li active-li">
							<a>车票</a>
						</li>
						<li class="li">
							<a>常用查询</a>
						</li>
						<li class="li">
							<a>订餐</a>
						</li>
					</ul>
					<div class="search-main">
						<div class="search-main-tab show">
							<div class="main-tab">
								<ul class="ul-tab-chepiao">
									<li class="active-chepiao">
										<a>单程</a>
									</li>
									<li>
										<a>往返</a>
									</li>
									<li>
										<a>中转换乘</a>
									</li>
									<li>
										<a>退改签</a>
									</li>
								</ul>
								<div class="ul-tab-chepiao-div">
									<div class="ul-tab-chepiao-item itemform show">
										<div class="form">
											<div class="item-form">
												<label>出发地:</label>
												<input placeholder="简拼/全拼/汉字" id="chufadi"/>
											</div>
											<div class="item-form">
												<label>到达地:</label>
												<input placeholder="简拼/全拼/汉字"/>
											</div>
											<div class="item-form">
												<label>出发日期:</label>
												<input/>
											</div>
											<div class="item-form">
												<label></label>
												<div class="form-radio-group">
													<div class="form-radio">
														<span>
															<a>学生票</a>
														</span>
														<div class="radio">
															<div class="check-box">
																<svg viewBox="0 0 64 64" class="check-icon" ><path d="M50.42,16.76L22.34,39.45l-8.1-11.46c-1.12-1.58-3.3-1.96-4.88-0.84c-1.58,1.12-1.95,3.3-0.84,4.88l10.26,14.51  c0.56,0.79,1.42,1.31,2.38,1.45c0.16,0.02,0.32,0.03,0.48,0.03c0.8,0,1.57-0.27,2.2-0.78l30.99-25.03c1.5-1.21,1.74-3.42,0.52-4.92  C54.13,15.78,51.93,15.55,50.42,16.76z"></path></svg>
															</div>
														</div>
													</div>
													<div class="form-radio">
														<span>
															<a>高铁/动车票</a>
														</span>
														<div class="radio">
															<div class="check-box">
																<svg viewBox="0 0 64 64" class="check-icon" ><path d="M50.42,16.76L22.34,39.45l-8.1-11.46c-1.12-1.58-3.3-1.96-4.88-0.84c-1.58,1.12-1.95,3.3-0.84,4.88l10.26,14.51  c0.56,0.79,1.42,1.31,2.38,1.45c0.16,0.02,0.32,0.03,0.48,0.03c0.8,0,1.57-0.27,2.2-0.78l30.99-25.03c1.5-1.21,1.74-3.42,0.52-4.92  C54.13,15.78,51.93,15.55,50.42,16.76z"></path></svg>
															</div>
														</div>
													</div>
												</div>
												
											</div>
											<div class="item-form">
												<button class="submit-button">查询</button>
											</div>
											
										</div>
									</div>
									<div class="ul-tab-chepiao-item">
										<a>往返tab</a>
									</div>
									<div class="ul-tab-chepiao-item">
										<a>中转换乘tab</a>
									</div>
									<div class="ul-tab-chepiao-item">
										<a>退改签tab</a>
									</div>
								</div>
							</div>
						</div>
						<div class="search-main-tab">
							<a>常用查询</a>
						</div>
						<div class="search-main-tab">
							<a>订餐</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	
		
		<div id="yuyan" class="pane">
			<a>汉语</a>
			<a>English</a>
		</div>
		
		<div id="wode12306" class="pane">
			<a>火车票订单</a>
			<a>候补订单</a>
		</div>
		
		<div id="xuanzechezhan" class="chezhanxuanze">
			<div class="xuanzechezhan-pane">
				<div class="col-2">
					<ul class="zhandian-item-list">
						<li class="zhandian-item-list-li zhandian-active">
							<a>国内站点</a>
						</li>
						<li class="zhandian-item-list-li">
							<a>国际站点</a>
						</li>
					</ul>
				</div>
				<div class="col-8">
					<div class="zhandian zhandianactiv guoneizhandian">
						<div>
							<a>拼音支持首字母输入</a>
						</div>
						<div>
							<ul class="zhandian-city-list">
								<li class="zhandian-city">热门</li>
								<li class="zhandian-city">ABCDE</li>
								<li class="zhandian-city">FGHIJ</li>
								<li class="zhandian-city">KLMNO</li>
								<li class="zhandian-city">PQRST</li>
								<li class="zhandian-city">UVWXYZ</li>
							</ul>
						</div>
						<div class="city-body-list">
							<div class="zhandian-city-body-gn city-body-list-active">
									1
							</div>
							<div class="zhandian-city-body-gn">
									2
							</div>
							<div class="zhandian-city-body-gn">
									3
							</div>
							<div class="zhandian-city-body-gn">
									4
							</div>
							<div class="zhandian-city-body-gn">
									5
							</div>
							<div class="zhandian-city-body-gn">
									6
							</div>
						</div>
					</div>
					<div class="zhandian guojizhandian">
						<a>国际站点</a>
					</div>
				</div>
			</div>
		</div>
		
		<div class="fixed-right">
			<ul>
				<li>
					<a>最新发布</a>
				</li>
				<li>
					<a>联系客服</a>
				</li>
				<li>
					<a>app下载</a>
				</li>
				<li>
					<a>关闭</a>
				</li>
			</ul>
		</div>
		
		<script>
			//选择出发地
			let chufadi=document.getElementById('chufadi');
			let chenshi=document.getElementById('xuanzechezhan');
			
			mouseClickEvent(chufadi,chenshi);
			
			let radio_doms=document.querySelectorAll(".radio");
			radio_doms.forEach((e)=>{
				e.addEventListener('click',function(n){
					if(e.classList.contains("radio-checked")){
						e.classList.remove("radio-checked")
					}else{
						e.classList.add("radio-checked")
					}
				})
			})
			
			function mouseClickEvent(mouseDom,showDom){
				mouseDom.addEventListener('click',function(e){
					 showDom.style.position ='absolute';
					 showDom.style.display = 'block';
					 //获取元素在屏幕里的可见地方 
					 var rect = mouseDom.getBoundingClientRect();
					 let top=rect.bottom + window.pageYOffset;
					 showDom.style.left = rect.left + "px";
					 showDom.style.right= rect.right + "px";
					 showDom.style.top = top + "px";
				})
				mouseDom.addEventListener('mouseout', function(e) {
					leave();
				});
				showDom.addEventListener('mouseout', function(e) {
					leave();
				});
				function leave(){
					var sourceDivRect = mouseDom.getBoundingClientRect(); // 获取该div元素相对于视口的位置信息
					var targetDivRect = showDom.getBoundingClientRect();
					var mouseX = event.clientX; // 获取鼠标当前位置的x坐标
					var mouseY = event.clientY; // 获取鼠标当前位置的y坐标
					if (mouseX >= sourceDivRect.left && mouseX <= sourceDivRect.right && mouseY >= sourceDivRect.top && mouseY <= sourceDivRect.bottom) {
						console.log('鼠标在div区域内');
					} else if( mouseX >= targetDivRect.left && mouseX <= targetDivRect.right && mouseY >= targetDivRect.top && mouseY <= targetDivRect.bottom){
						console.log('鼠标在div区域内');
					} else {
						console.log('两个区域都不在');
						showDom.style.display = 'none';
					}
				}
			}
			
			// const imgItems =document.querySelectorAll(".img-li");
			
			// let tupianul=document.getElementsByClassName("tupian-ul")[0];
			// const totalWidth = tupianul.offsetWidth;
			// const lengthavg=totalWidth / 3;
			
			
			// console.log('Total Width:', totalWidth,lengthavg);
			// tupianul.style.position='absolute'
			
			const nodes_city = document.querySelectorAll('.zhandian-city');
			const nodes_city_bound=document.querySelectorAll('.zhandian-city-body-gn');	
			setTab(nodes_city,nodes_city_bound,'city-body-list-active')
			
			const nodes_zhandian = document.querySelectorAll('.zhandian-item-list-li');
			const nodes_zhandian_bound=document.querySelectorAll('.zhandian');	
			setTab(nodes_zhandian,nodes_zhandian_bound,'zhandian-active')
			
			const nodes = document.querySelectorAll('.search-side li');
			const nodes_bound=document.querySelectorAll('.search-main-tab');	
			setTab(nodes,nodes_bound,'active-li')
			
			const nodes_chepiao = document.querySelectorAll('.ul-tab-chepiao li');
			const nodes_chepiao_bounds = document.querySelectorAll('.ul-tab-chepiao-item');
			setTab(nodes_chepiao,nodes_chepiao_bounds,'active-chepiao');
			
			
			function setTab(nodes,nodes_bound,className){
				nodes.forEach((node, index) => {
					 node.addEventListener('click', () => {
					   let num=index;
					   nodes.forEach(n => n.classList.remove(className));
					   node.classList.add(className);
					   setBoundItem(num);
					 });
				});
				
				function setBoundItem(num){
					nodes_bound.forEach((node, index) => {
						if(index==num){
							node.style.display='block';
						}else{
							node.style.display='none';
						}
					})
				}
			}
			
		
			
			
			const liItems = document.querySelectorAll('.item-li');
			liItems.forEach((li) => {
			        //鼠标悬停
			        li.addEventListener('mouseover', function(e) {
			            let nodes=Array.from(li.childNodes);
			            nodes.forEach((node)=>{
			                if(node.nodeName=='DIV'){
			                    node.style.position ='absolute';
			                    node.style.display = 'block';
			                    node.style.top = li.offsetTop + li.offsetHeight + "px";
			                }
			    		})
					});
					//鼠标离开事件
					li.addEventListener('mouseout', function(e) {
						let nodes=Array.from(li.childNodes);
						nodes.forEach((node)=>{
							if(node.nodeName=='DIV'){
								node.style.display = 'none';
							}
						})
					});
			})	
			
			
			
			let wode12306li=document.getElementById('wode12306-li');
			let wode12306=document.getElementById('wode12306')
			let dom=document.getElementById('yuyanyan-li');
			let pane=document.getElementById('yuyan');
			
			
			mouseEvent(dom,pane);
			mouseEvent(wode12306li,wode12306);
			function mouseEvent(mouseDom,showDom){
				mouseDom.addEventListener('mouseover',function(e){
					 showDom.style.position ='absolute';
					 showDom.style.display = 'block';
					 //获取元素在屏幕里的可见地方
					 var rect = mouseDom.getBoundingClientRect();
					 showDom.style.width = mouseDom.offsetWidth +"px";
					 showDom.style.left = rect.left + "px";
					 showDom.style.right= rect.right + "px";
					 showDom.style.top =  rect.top + mouseDom.offsetHeight + "px";
				})
				mouseDom.addEventListener('mouseout', function(e) {
					leave();
				});
				showDom.addEventListener('mouseout', function(e) {
					leave();
				});
				function leave(){
					var sourceDivRect = mouseDom.getBoundingClientRect(); // 获取该div元素相对于视口的位置信息
					var targetDivRect = showDom.getBoundingClientRect();
					var mouseX = event.clientX; // 获取鼠标当前位置的x坐标
					var mouseY = event.clientY; // 获取鼠标当前位置的y坐标
					if (mouseX >= sourceDivRect.left && mouseX <= sourceDivRect.right && mouseY >= sourceDivRect.top && mouseY <= sourceDivRect.bottom) {
						console.log('鼠标在div区域内');
					} else if( mouseX >= targetDivRect.left && mouseX <= targetDivRect.right && mouseY >= targetDivRect.top && mouseY <= targetDivRect.bottom){
						console.log('鼠标在div区域内');
					} else {
						console.log('两个区域都不在');
						showDom.style.display = 'none';
					}
				}
			}
			
			let list=['../img/banner10.jpg','../img/banner12.jpg','../img/banner26.jpg','../img/banner0619.jpg',
			'../img/banner20200707.jpg','../img/banner20201223.jpg']
			var rollImage={
				id:'id',
				list:[],
				moveLeft:0,
				width:0,
				height:0,
				ul_img:null,
				li_list:[],
				totalwidth:0,
				timer:null,
				setId:function(id){
					this.id=id;
				},
				//设置数据
				setlist:function(list){
					this.list=list;
				},
				//设置宽高
				setSize:function(width,height){
					this.height=height;
					this.width=width;
				},
				//创建dom
				createDom:function(){
					let dom=document.getElementById(this.id);
					if(this.width==0){
						this.width=dom.offsetWidth;
					}
					if(this.height==0){
						this.height=dom.offsetHeight;
					}
					let divMain = document.createElement('div');
					divMain.style.width=this.width+'px';
					divMain.style.height=this.height+'px';
					this.ul_img = document.createElement('ul');
					
					divMain.classList.add('lubo');
					let div_img = document.createElement('div');
					
					this.ul_img.classList.add('lubo-ul');
					div_img.appendChild(this.ul_img);
					divMain.appendChild(div_img);
					
					
					let div_yuandian = document.createElement('div');
					div_yuandian.classList.add('lubo-yuandian')
					div_yuandian.style.width=this.width+'px';
					let ul_yuandian = document.createElement('ul');
					div_yuandian.appendChild(ul_yuandian);
					divMain.appendChild(div_yuandian);
					
					this.list.forEach((e,index)=>{
						let imgli = document.createElement('li');
						let img = document.createElement('img');
						img.style.width=this.width+'px';
						img.style.height=this.height+'px';
						img.setAttribute('src',e);
						imgli.appendChild(img);
						this.ul_img.appendChild(imgli);
						
						let yuandian = document.createElement('li');
						
						
						if(index==0){
							yuandian.classList.add('active');
						}else{
							yuandian.classList.add('noactive');
						}
						rollImage.li_list.push(yuandian);
						ul_yuandian.appendChild(yuandian);
					})
					dom.appendChild(divMain);
					
					this.totalwidth=this.width * this.list.length;
					this.totalwidth=(this.totalwidth * -1);
					
					this.li_list.forEach((e,index)=>{
						e.addEventListener('click',function(n){
							let w=(index+1) * this.width;
							this.moveLeft=-1 * w;
							if(this.moveLeft === this.totalwidth){
								this.moveLeft = 0;
							}
							this.ul_img.style.left = this.moveLeft+"px";
							yuandianLiList.forEach((d)=>{
								d.classList.remove('active')
								d.classList.add('noactive')
							})
							e.classList.add("active")
							e.classList.remove('noactive')
						})
					})
				},
				move:function(){
					let num=0;
					rollImage.timer = setInterval(function(){
					    // 当跑完一轮时，重置位置
					    if(rollImage.moveLeft === rollImage.totalwidth){
					        rollImage.moveLeft = 0;
							num=0;
					    }
						console.log(rollImage.totalwidth)
						
						rollImage.li_list.forEach((e)=>{
							e.classList.remove('active');
							e.classList.add('noactive');
						})
						let yuandianDom=rollImage.li_list[num];
						yuandianDom.classList.add("active");
						yuandianDom.classList.remove('noactive');
					    // 设置列表每20毫秒左移5px
					    rollImage.ul_img.style.left = rollImage.moveLeft+"px";
						rollImage.moveLeft -= rollImage.width;
						num++;
					},1000)
				},
				addMouseEvent:function(){
					this.ul_img.onmouseenter = function(){
					    clearInterval(rollImage.timer);
					}; 
					// 鼠标移出，调用move重新开启定时器
					this.ul_img.onmouseleave = function(){
					    rollImage.move();
					}
				},
				start:function(){
					this.createDom();
					this.move();
					this.addMouseEvent();
				}
			}
			rollImage.setId('main');
			rollImage.setlist(list);
			rollImage.start();
			
			
		</script>
		
	</body>
</html>